<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport"
    content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta name="format-detection" content="telephone=yes">
<title></title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="js/layui/css/layui.css">
<script src="js/js/jquery.js"></script>
<script src="js/js/area.js"></script>
<style type="text/css">
*{padding: 0;margin: 0;box-sizing: border-box;}
.form-group{width: 100%;padding: 0 3%;}
.form-area{width: 100%;display: flex;align-items: center;border-bottom: 1px solid #ededed;padding: 5px 0;}
.form-title{font-size: 14px;width: 60px;}
.form-inp{flex: 1;-webkit-flex: 1;display: flex;align-items: center;}
.form-inp input{flex: 1;-webkit-flex: 1;border: none;margin: 0 10px;}
.form-inp i{color: #999;}
.form-inp textarea{flex: 1;-webkit-flex: 1;border: none;margin: 0 10px;resize: none;}
</style>
</head>

<body>
    <div class="form-group">
        <div class="form-area">
            <div class="form-title">收货人</div>
            <div class="form-inp">
                <input type="text" class="layui-input name-submit" placeholder="名字">
            </div>
        </div>
        <div class="form-area">
            <div class="form-title">手机号码</div>
            <div class="form-inp">
                <input type="number" class="layui-input phone-submit" placeholder="手机号">
            </div>
        </div>
        <div class="form-area">
            <div class="form-title">选择地区</div>
            <div class="form-inp">
                <input type="text" class="layui-input region-submit" placeholder="省、市、区、街道" data-one="河南省" data-two="南阳市" data-three="方城县" data-four="广阳镇" onfocus="this.blur();">
                <i class="layui-icon layui-icon-right"></i>
            </div>
        </div>
        <div class="form-area" style="align-items: flex-start;line-height: 38px;">
            <div class="form-title">详细地址</div>
            <div class="form-inp">
                <textarea class="layui-textarea detailed-submit" placeholder="小区楼栋/乡村名称"></textarea>
            </div>
        </div>
        <div class="form-area">
            <div class="form-title">选择地区</div>
            <div class="form-inp">
                <input type="text" class="layui-input region-submit" placeholder="省、市、区、街道" data-one="河南省" data-two="南阳市" data-three="方城县" data-four="广阳镇" onfocus="this.blur();">
                <i class="layui-icon layui-icon-right"></i>
            </div>
        </div>
        <div class="form-area" style="align-items: flex-start;line-height: 38px;">
            <div class="form-title">详细地址</div>
            <div class="form-inp">
                <textarea class="layui-textarea detailed-submit" placeholder="小区楼栋/乡村名称"></textarea>
            </div>
        </div>
        <div class="form-area">
            <div class="form-title">选择地区</div>
            <div class="form-inp">
                <input type="text" class="layui-input region-submit" placeholder="省、市、区、街道" data-one="河南省" data-two="南阳市" data-three="方城县" data-four="广阳镇" onfocus="this.blur();">
                <i class="layui-icon layui-icon-right"></i>
            </div>
        </div>
        <div class="form-area" style="align-items: flex-start;line-height: 38px;">
            <div class="form-title">详细地址</div>
            <div class="form-inp">
                <textarea class="layui-textarea detailed-submit" placeholder="小区楼栋/乡村名称"></textarea>
            </div>
        </div>
    </div>
    <!-- <div class="dispickerPlug-masking"></div>
    <div class="dispickerPlug-box">
        <div class="dispickerPlug-head">
            <div class="dispickerPlug-btn">
                <div class="dispickerPlug-cancel">取消</div>
                <div class="dispickerPlug-confirm">确定</div>
            </div>
            <div class="dispickerPlug-menu">
                <div class="dispickerPlug-menu-area dispickerPlug-menu-area-active">新疆维吾尔自治区</div>
                <div class="dispickerPlug-menu-area">新疆维吾尔自治区</div>
                <div class="dispickerPlug-menu-area">新疆维吾尔自治区</div>
                <div class="dispickerPlug-menu-area">新疆维吾尔自治区</div>
            </div>
        </div>
        <div class="dispickerPlug-main">
            <div class="dispickerPlug-group" style="display: block;">
                <div class="dispickerPlug-area">上海市</div>
            </div>
            <div class="dispickerPlug-group"></div>
            <div class="dispickerPlug-group"></div>
            <div class="dispickerPlug-group"></div>
        </div>
    </div> -->
    
<script type="text/javascript" type="module">
    $(".region-submit").dispickerInit({
        linkage: 4,//省、 市、 区、 街道
        // 确认回调函数(el为当前节点)
        confirm(obj,el){
            console.log(obj)
            console.log(el)
        },
        // 取消回调函数(el为当前节点)
        cancel(el){
            console.log("cancle")
        }
    })
    
    
</script>

</body>

</html>